<!DOCTYPE html>
<html>
<head>
	<title>Video Extension Demo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
	<link rel="icon" type="image/png" href="../../iui-favicon.png">
	<link rel="apple-touch-icon" href="../../iui-logo-touch-icon-hd.png" />
	<link rel="apple-touch-startup-image" href="../../iui-startup.jpg">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="stylesheet" href="../../iui.css" type="text/css" />
	<link rel="stylesheet" href="../../t/default/default-theme.css"  type="text/css"/>
	<link rel="stylesheet" href="../ext-css/iui-ext.css"  type="text/css"/> <!-- only to use code class in about page -->
	<link rel="stylesheet" href="iui-video.css" type="text/css" />
	
	<script type="application/x-javascript" src="../../iui.js"></script>	
	<script type="application/x-javascript" src="iui-video.js"></script>
	<script type="application/x-javascript" src="iui-video-logger.js"></script>

</head>
<body>

	<div class="toolbar">
		<h1 id="pageTitle"></h1>
		<a id="backButton" class="button" href="#"></a>
	</div>

	<ul id="home" title="Video Ext" selected="true">
		<li><a href="#about">About Video Ext</a></li>
		<li><a href="#instructions">Instructions</a></li>
		<li class="group">Video Views ("Pages")</li>
		<li><a href="#video1">Video 1</a></li>
		<li><a href="#video2">Video 2</a></li>
		<li><a href="#video3">Video 1 Dynamic</a></li>
		<li><a href="#video4">Video 2 Dynamic</a></li>
	</ul>

	<div id="about" class="panel" title="About">
		<h2>About Video Extension</h2>
		<fieldset>
			<div class="row">
				<p>iui-video.js is an extension for the iUI framework. It is currently EXPERIMENTAL</p>
				<p>For info on how to use this extension see Instructions.</p>
				<p>Sean Gilligan</p>
			</div>
		</fieldset>
	</div>


	<div id="instructions" class="panel" title="Instructions">
		<h2>Video Ext - instructions for use.</h2>
		<fieldset>
			<div class="row">
				<p>The Video Extension is easy to install into your iUI powered web app. It requires no changes to existing iUI components. Start by linking the iui-video.js to your main index file just like the you would iui.js.</p>
				<p>You can now place compatible HTML5 video in iUI "pages".</p>
				<p>Use the following markup for each iUI view ("page") that contains a video:</p>
			</div>
		</fieldset>
		<fieldset>
			<div class="row">
				<br />
				<ul class="code">
					<li>&lt;div id="video1"></li>
					<li>&nbsp;&nbsp;&lt;a href="path/to/video.mp4" target="_self" rel="iuiposter"></li>
					<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="path/to/poster.jpg" width="nnn" height="mmm"></li>
					<li>&nbsp;&nbsp;&lt;/a></li>
					<li>&lt;/div></li>
				</ul>
				<br />
			</div>
		</fieldset>
		<fieldset>
			<div class="row">
				<p>The Video Extension will automatically create a video tag and play the video when the iUI view (aka "page") is active.</p>
			</div>
		</fieldset>
	</div>


	<div id="video1" title="Video 1">
		<video class="video-out" src="http://pb.vlogcentral.com/movies/27654.3gp" width="320" height="240" poster="http://pb.vlogcentral.com/movies/12061.jpg" ></video>
		<a href="http://pb.vlogcentral.com/movies/27654.3gp" target="_self" rel="iuiposter">
			<img src="http://pb.vlogcentral.com/movies/12061.jpg" width="320" height="240" />
		</a>
	</div>  
	
	<div id="video2" title="Video 2">
		<video src="http://pb.vlogcentral.com/movies/73767.3gp" width="320" height="240" poster="http://pb.vlogcentral.com/movies/73610.jpg" ></video>
		<a href="http://pb.vlogcentral.com/movies/73767.3gp" target="_self" rel="iuiposter">
			<img src="http://pb.vlogcentral.com/movies/73610.jpg" width="320" height="240" />
		</a>
	</div>  
	
	<div id="video3" title="Video 1 Dynamic">
		<a href="http://pb.vlogcentral.com/movies/27654.3gp" target="_self" rel="iuiposter">
			<img src="http://pb.vlogcentral.com/movies/12061.jpg" width="320" height="240" />
		</a>
	</div>  
	
	<div id="video4" title="Video 2 Dynamic">
		<a href="http://pb.vlogcentral.com/movies/73767.3gp" target="_self" rel="iuiposter">
			<img src="http://pb.vlogcentral.com/movies/73610.jpg" width="320" height="240" />
		</a>
	</div>  

</body>
</html>